<template>
  <div v-loading="loading" class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="工艺要求编码" prop="code">
          <CodeRuleInput :band-value.sync="formData.code" table-name="engineering_requirement" column-name="code" :is-edit="tagId" />
        </el-form-item>
        <el-form-item label="物料编码" class="clickChoose" prop="materialCode">
          <el-input v-model="formData.materialCode" placeholder="请选择" readonly />
          <a
            class="clickChoose_button"
            @click.prevent="chooseBOMMaterial"
          >
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName">
          <el-input v-model="formData.materialName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="规格型号" prop="materialModel">
          <el-input v-model="formData.materialModel" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="物料分类" prop="materialTypeName">
          <el-input v-model="formData.materialTypeName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="物料单位" prop="materialUnitName">
          <el-input v-model="formData.materialUnitName" placeholder="暂无" disabled />
        </el-form-item>

        <el-form-item label="工艺流程号" class="clickChoose" prop="flowCode">
          <el-input v-model="formData.flowCode" placeholder="请选择" readonly />
          <a
            class="clickChoose_button"
            @click.prevent="chooseProcessFlow"
          >
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item label="附件" class="double">
          <FileManageFull
            :file-names="formData.fileName"
            :file-real-names="formData.fileRealName"
            :file-urls="formData.url"
            :row-index="1"
            @fileName="setFileName"
          />
        </el-form-item>
        <el-form-item label="备注" class="double">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>

        <el-form-item v-if="isShow" label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div v-if="processFlowList.length>0" class="processRequirement_bottom">
        <div class="processRequirement_bottom_tree">
          <div class="tree_header">工艺流程</div>
          <div class="tree_container">
            <a
              v-for="(item,index) in processFlowList"
              :key="index"
              class="tree_container_item"
              :class="currentProcess.processFlowDetailId==item.processFlowDetailId?'selected_row':''"
              @click="processClick(item,index)"
            >
              {{ item.wayName }}
            </a>
          </div>
        </div>
        <div class="processRequirement_bottom_detail">
          <div class="formItem_header">
            {{ currentProcess.wayName }}工艺要求
          </div>

          <div class="formItem_header formItem_header_padding">
            计时
          </div>
          <div class="detail_form">
            <div class="detail_form_item">
              <div class="detail_form_item_name">标准工时（分）</div>
              <div class="detail_form_item_input">
                <el-input v-model="detailForm.standardWorkTime" placeholder="请输入" clearable />
              </div>
            </div>
            <div class="detail_form_item">
              <div class="detail_form_item_name">工时单价（元）</div>
              <div class="detail_form_item_input">
                <el-input v-model="detailForm.workTimePrice" placeholder="请输入" clearable />
              </div>
            </div>
          </div>
          <div class="formItem_header formItem_header_padding">
            计件
          </div>
          <div class="detail_form">
            <div class="detail_form_item">
              <div class="detail_form_item_name">计件单价（元）</div>
              <div class="detail_form_item_input">
                <el-input v-model="detailForm.unitPriceOfPiecework" placeholder="请输入" clearable />
              </div>
            </div>
          </div>
          <div class="formItem_header formItem_header_padding">
            生产输入
            <div class="formItem_header_operate">
              <a class="formItem_header_operate_item" @click="chooseProduceIn">
                <svg-icon icon-class="新增" />
                <div class="item_name">添加</div>
              </a>
              <a class="formItem_header_operate_item delete" @click="deleteProduceIn">
                <svg-icon icon-class="删除" />
                <div class="item_name">删除</div>
              </a>
            </div>
          </div>
          <div ref="table_container" class="table_container">
            <el-table
              ref="table"
              :data="tableData1"
              stripe
              border
              :header-cell-class-name="headerCellClassName"
              @selection-change="selectionChange1"
            >
              <el-table-column type="selection" width="70" align="center" />
              <el-table-column label="物料编码" min-width="120" prop="materialCode" :show-overflow-tooltip="true" />
              <el-table-column label="物料名称" min-width="100" prop="materialName" :show-overflow-tooltip="true" />
              <el-table-column label="规格型号" min-width="100" prop="materialModel" :show-overflow-tooltip="true" />
              <el-table-column label="物料分类" min-width="100" prop="materialTypeName" :show-overflow-tooltip="true" />
              <el-table-column label="物料单位" min-width="100" prop="materialUnitName" :show-overflow-tooltip="true" />
              <el-table-column label="需求数量" :min-width="SETTINGS.settings_decimalDigits_length" prop="demandNumber">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.demandNumber"
                    clearable
                    placeholder="请输入"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="formItem_header formItem_header_padding">
            生产输出
            <div class="formItem_header_operate">
              <a class="formItem_header_operate_item" @click="chooseProduceOut">
                <svg-icon icon-class="新增" />
                <div class="item_name">添加</div>
              </a>
              <a class="formItem_header_operate_item delete" @click="deleteProduceOut">
                <svg-icon icon-class="删除" />
                <div class="item_name">删除</div>
              </a>
            </div>
          </div>

          <div ref="table_container" class="table_container">
            <el-table
              ref="table2"
              :data="tableData2"
              stripe
              border
              :header-cell-class-name="headerCellClassName"
              @selection-change="selectionChange2"
            >
              <el-table-column type="selection" width="70" align="center" />
              <el-table-column label="物料编码" min-width="120" prop="materialCode" :show-overflow-tooltip="true" />
              <el-table-column label="物料名称" min-width="100" prop="materialName" :show-overflow-tooltip="true" />
              <el-table-column label="规格型号" min-width="100" prop="materialModel" :show-overflow-tooltip="true" />
              <el-table-column label="物料分类" min-width="100" prop="materialTypeName" :show-overflow-tooltip="true" />
              <el-table-column label="物料单位" min-width="100" prop="materialUnitName" :show-overflow-tooltip="true" />
              <el-table-column label="产出数量" :min-width="SETTINGS.settings_decimalDigits_length" prop="outputNumber">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.outputNumber"
                    clearable
                    placeholder="请输入"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="formItem_header formItem_header_padding">
            生产过程
            <div class="formItem_header_operate">
              <a class="formItem_header_operate_item" @click="chooseProduceProcess">
                <svg-icon icon-class="新增" />
                <div class="item_name">添加</div>
              </a>
              <a class="formItem_header_operate_item delete" @click="deleteProduceProcess">
                <svg-icon icon-class="删除" />
                <div class="item_name">删除</div>
              </a>
            </div>
          </div>

          <div ref="table_container" class="table_container">
            <el-table
              ref="table3"
              :data="tableData3"
              stripe
              border
              @selection-change="selectionChange3"
            >
              <el-table-column type="selection" width="70" align="center" />
              <el-table-column label="操作描述">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.operationDescription"
                    clearable
                    placeholder="请输入"
                  />
                </template>
              </el-table-column>
              <el-table-column label="产品特性">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.productCharacter"
                    clearable
                    placeholder="请输入"
                  />
                </template>
              </el-table-column>
              <el-table-column label="过程特性">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.courseCharacter"
                    clearable
                    placeholder="请输入"
                  />
                </template>
              </el-table-column>
              <el-table-column label="图号">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.pictureId" filterable clearable placeholder="点击搜索">
                    <el-option
                      v-for="item in pictureOptions"
                      :key="item.id"
                      :label="item.pictureCode"
                      :value="item.id"
                    />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo } from '@/api/engineeringManage/processRequirement'
import { getAllPictureCode } from '@/api/engineeringManage/documentManage'
import { getInfo as getProcessList } from '@/api/engineeringManage/processFlow'
import ChooseBOMMaterial from '@/views/engineeringManage/BOMManage/chooseBOMMaterial'
import ChooseBOMMaterialDetail from '@/views/engineeringManage/BOMManage/chooseBOMMaterialDetail'
import ChooseProcessFlow from '@/views/engineeringManage/processFlow/chooseProcessFlow.vue'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {},
    tag: {},
    tagId: {}
  },
  data() {
    return {
      loading: true,
      isShow: false,
      formData: {
        id: undefined,
        code: undefined,
        bomDetailId: undefined,
        materialId: undefined,
        materialCode: undefined,
        materialName: undefined,
        materialModel: undefined,
        materialTypeName: undefined,
        materialUnitName: undefined,
        flowId: undefined,
        flowCode: undefined,
        fileName: '',
        fileRealName: '',
        url: '',
        remark: undefined,
        status: '1'
      },
      rules: {
        code: [
          { required: true, message: '工艺要求编码不能为空', trigger: 'blur' }
        ],
        materialCode: [
          { required: true, message: '物料编码不能为空', trigger: 'change' }
        ],
        flowCode: [
          { required: true, message: '工艺流程号不能为空', trigger: 'change' }
        ]
      },
      processFlowList: [], // 左边工艺流程列表数据

      detailForm: {}, // 计时，计件数据
      detailFormTemplate: { // 计时，计件数据的模板（初始化的时候用）
        flowDetailId: '',
        standardWorkTime: '',
        workTimePrice: '',
        unitPriceOfPiecework: ''
      },
      tableData1: [], // 生产输入数据
      tableData2: [], // 生产输出数据
      tableData3: [], // 生产输出数据

      selectionsAll1: [], // 生产输入选中值
      selectionsAll2: [], // 生产输出选中值
      selectionsAll3: [], // 生产输出选中值

      currentProcess: {}, // 左边当前选中工序
      currentProcessIndex: '', // 左边当前选中工序序号
      currentChooseType: '', // 当前选择物料的类型（生产输入/生产输出），目的是共用同一个物料选择弹框

      pictureOptions: [], // 图号下拉数据

      triggerTag: false // 触发标志，watch是否触发
    }
  },
  watch: {
    'formData.flowId'(data) {
      if (this.triggerTag && data) {
        // 通过工艺流程ID，获取工艺流程明细
        getProcessList(data).then(res => {
          if (res.data.data.length > 0) {
            const cacheData = res.data.data
            cacheData.forEach(item => {
              item.processFlowDetailId = item.id
              item.flowDetailId = item.id
              delete item['id']
            })
            this.processFlowList = cacheData

            this.$nextTick(() => {
              this.initProcessFlowData()
            })
          } else {
            this.$message({
              message: '工艺流程数据不存在',
              type: 'warning'
            })
          }
        })
      }
    }
  },
  mounted() {
    if (this.tag == 'add') { // 新增
      this.loading = false
    }
    if (this.tag == 'edit') { // 编辑
      this.getInfo()
    }
    if (this.tag == 'copy') { // 复制
      getInfo(this.tagId).then(res => {
        this.formData.flowId = res.data.flowId
        this.formData.flowCode = res.data.flowCode
        this.loading = false
        if (res.data.flowCodeData) {
          const cacheTableData = this.$deepClone(res.data.flowCodeData)
          const cacheTableData2 = []
          cacheTableData.forEach(item => {
            const cacheItem = this.$deepClone(item)
            cacheItem.engineeringRequireDetailDemandData = []
            cacheItem.engineeringRequireDetailOutputData = []
            cacheItem.engineeringRequireDetailProcessData = []
            cacheItem.engineeringRequireDetail = []
            cacheItem.delete['engineeringRequireDetailListVo']
            cacheTableData2.push(cacheItem)
          })

          this.processFlowList = cacheTableData2
        }
        this.processFlowList.forEach(item => {
          item.processFlowDetailId = item.id
          item.flowDetailId = item.id
          delete item['id']
        })
        this.$nextTick(() => {
          this.getPictureOptions()
          // 模拟点击第一条
          this.currentProcess = this.processFlowList[0]
          this.currentProcessIndex = 0
          this.detailForm = this.currentProcess.engineeringRequireDetail || this.$deepClone(this.detailFormTemplate)
          this.detailForm.flowDetailId = this.processFlowList[0].flowDetailId
          this.tableData1 = this.currentProcess.engineeringRequireDetailDemandData || []
          this.tableData2 = this.currentProcess.engineeringRequireDetailOutputData || []
          this.tableData3 = this.currentProcess.engineeringRequireDetailProcessData || []
        })
      })
    }
  },
  methods: {
    setFileName(...data) {
      this.$set(this.formData, 'fileName', data[0])
      this.$set(this.formData, 'fileRealName', data[1])
      this.$set(this.formData, 'url', data[2])
    },
    headerCellClassName(data) {
      if (['demandNumber', 'outputNumber'].indexOf(data.column.property) != -1) {
        return 'column_bt'
      }
    },
    getPictureOptions() {
      getAllPictureCode({ materialId: this.formData.materialId }).then(res => {
        this.pictureOptions = res.data
      })
    },
    checkCurrentForm() { // 校验当前工序的表单
      let res = true
      if (res && (this.detailForm.standardWorkTime)) {
        if (!this.SETTINGS.reg_integer.test(this.detailForm.standardWorkTime)) {
          this.$message({
            message: '工时必须为整数',
            type: 'warning'
          })
          res = false
        }
      }
      if (res && (this.detailForm.workTimePrice)) {
        if (!this.SETTINGS.reg_zero.test(this.detailForm.workTimePrice)) {
          this.$message({
            message: '工时单价未正确填写',
            type: 'warning'
          })
          res = false
        }
      }
      if (res && (this.detailForm.unitPriceOfPiecework)) {
        if (!this.SETTINGS.reg_zero.test(this.detailForm.unitPriceOfPiecework)) {
          this.$message({
            message: '计件单价未正确填写',
            type: 'warning'
          })
          res = false
        }
      }
      if (res && (this.tableData1.length > 0)) {
        this.tableData1.forEach(item => {
          if (res && !item.demandNumber) {
            this.$message({
              message: '需求数量不能为空',
              type: 'warning'
            })
            res = false
          }
          if (res && !this.SETTINGS.reg_no_zero.test(item.demandNumber)) {
            this.$message({
              message: '需求数量未正确填写',
              type: 'warning'
            })
            res = false
          }
        })
      }
      if (res && (this.tableData2.length > 0)) {
        this.tableData2.forEach(item => {
          if (res && !item.outputNumber) {
            this.$message({
              message: '产出数量不能为空',
              type: 'warning'
            })
            res = false
          }
          if (res && !this.SETTINGS.reg_no_zero.test(item.outputNumber)) {
            this.$message({
              message: ' 产出数量未正确填写',
              type: 'warning'
            })
            res = false
          }
        })
      }

      if (res) {
        return true
      } else {
        return false
      }
    },
    processClick(data, index) {
      if (this.checkCurrentForm()) {
        // 如果校验通过，先把旧数据更新到左边工序列表中
        this.processFlowList[this.currentProcessIndex].engineeringRequireDetail = this.$deepClone(this.detailForm)
        this.processFlowList[this.currentProcessIndex].engineeringRequireDetailDemandData = this.$deepClone(this.tableData1)
        this.processFlowList[this.currentProcessIndex].engineeringRequireDetailOutputData = this.$deepClone(this.tableData2)
        this.processFlowList[this.currentProcessIndex].engineeringRequireDetailProcessData = this.$deepClone(this.tableData3)

        this.currentProcess = data
        this.currentProcessIndex = index
        this.detailForm = data.engineeringRequireDetail || this.$deepClone(this.detailFormTemplate)
        this.detailForm.flowDetailId = data.flowDetailId
        this.tableData1 = data.engineeringRequireDetailDemandData || []
        this.tableData2 = data.engineeringRequireDetailOutputData || []
        this.tableData3 = data.engineeringRequireDetailProcessData || []
      } else {
        console.log(11)
      }
    },
    chooseProduceIn() {
      if (!this.formData.bomDetailId) {
        this.$message({
          message: '请先选择物料',
          type: 'warning'
        })
      } else {
        this.currentChooseType = '生产输入'
        const cacheTableData = this.$deepClone(this.tableData1)
        cacheTableData.forEach(item => {
          item.id = item.bomDetailId
        })
        this.$layer.iframe({
          // 弹框
          content: {
            content: ChooseBOMMaterialDetail, // 传递的组件对象
            parent: this, // 当前的vue对象
            data: {
              selectedRow: cacheTableData || [],
              bomId: this.formData.bomDetailId
            } // 当前主物料和当前点击的父级物料不能勾选
          },
          area: ['1000px', '700px'],
          title: '选择物料', // 标题
          shadeClose: false // 点击遮罩是否关闭
        })
      }
    },
    chooseBOMMaterialDetailCallBack(rowList) {
      if (!rowList) {
        return
      }
      if (this.currentChooseType == '生产输入') {
        const cacheTableData = this.$deepClone(rowList)
        const cacheTableData2 = []
        cacheTableData.forEach((item, index) => {
          if (this.tableData1.some(item2 => item2.bomDetailId == item.id)) {
            item = this.tableData1.filter(item2 => item2.bomDetailId == item.id)[0]
          } else {
            item.bomDetailId = item.id
            delete item['id']
            item.demandNumber = ''
          }
          cacheTableData2.push(item)
          if (index == cacheTableData.length - 1) {
            this.tableData1 = cacheTableData2
          }
        })
      }
      if (this.currentChooseType == '生产输出') {
        const cacheTableData = this.$deepClone(rowList)
        const cacheTableData2 = []
        cacheTableData.forEach((item, index) => {
          if (this.tableData2.some(item2 => item2.bomDetailId == item.id)) {
            item = this.tableData2.filter(item2 => item2.bomDetailId == item.id)[0]
          } else {
            item.bomDetailId = item.id
            delete item['id']
            item.outputNumber = ''
          }

          cacheTableData2.push(item)
          if (index == cacheTableData.length - 1) {
            this.tableData2 = cacheTableData2
          }
        })
      }
    },
    deleteProduceIn() {
      this.selectionsAll1.forEach(item => {
        this.tableData1.splice(this.tableData1.indexOf(item), 1)
      })
    },
    chooseProduceOut() {
      if (!this.formData.bomDetailId) {
        this.$message({
          message: '请先选择物料',
          type: 'warning'
        })
      } else {
        this.currentChooseType = '生产输出'
        const cacheTableData = this.$deepClone(this.tableData2)
        cacheTableData.forEach(item => {
          item.id = item.bomDetailId
        })
        this.$layer.iframe({
          // 弹框
          content: {
            content: ChooseBOMMaterialDetail, // 传递的组件对象
            parent: this, // 当前的vue对象
            data: {
              selectedRow: cacheTableData || [],
              bomId: this.formData.bomDetailId
            } // 当前主物料和当前点击的父级物料不能勾选
          },
          area: ['1000px', '700px'],
          title: '选择物料', // 标题
          shadeClose: false // 点击遮罩是否关闭
        })
      }
    },
    deleteProduceOut() {
      this.selectionsAll2.forEach(item => {
        this.tableData2.splice(this.tableData2.indexOf(item), 1)
      })
    },
    chooseProduceProcess() {
      const row = {
        operationDescription: '',
        productCharacter: '',
        courseCharacter: '',
        pictureId: '',
        pictureCode: ''
      }
      this.tableData3.push(row)
    },
    deleteProduceProcess() {
      this.selectionsAll3.forEach(item => {
        this.tableData3.splice(this.tableData3.indexOf(item), 1)
      })
    },
    selectionChange1(row) {
      this.selectionsAll1 = row
    },
    selectionChange2(row) {
      this.selectionsAll2 = row
    },
    selectionChange3(row) {
      this.selectionsAll3 = row
    },
    getInfo() {
      getInfo(this.tagId).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.isShow = true
        this.loading = false
        if (res.data.flowCodeData) {
          const cacheTableData = this.$deepClone(res.data.flowCodeData)
          const cacheTableData2 = []
          cacheTableData.forEach(item => {
            const cacheItem = this.$deepClone(item)
            cacheItem.engineeringRequireDetailDemandData = item.engineeringRequireDetailListVo ? item.engineeringRequireDetailListVo.engineeringRequireDetailDemandData : []
            cacheItem.engineeringRequireDetailOutputData = item.engineeringRequireDetailListVo ? item.engineeringRequireDetailListVo.engineeringRequireDetailOutputData : []
            cacheItem.engineeringRequireDetailProcessData = item.engineeringRequireDetailListVo ? item.engineeringRequireDetailListVo.engineeringRequireDetailProcessData : []
            cacheItem.engineeringRequireDetail = item.engineeringRequireDetailListVo
            cacheItem.delete['engineeringRequireDetailListVo']
            cacheTableData2.push(cacheItem)
          })

          this.processFlowList = cacheTableData2
        }
        this.processFlowList.forEach(item => {
          item.processFlowDetailId = item.id
          item.flowDetailId = item.id
        })
        this.$nextTick(() => {
          this.getPictureOptions()
          // 模拟点击第一条
          this.currentProcess = this.processFlowList[0]
          this.currentProcessIndex = 0
          this.detailForm = this.currentProcess.engineeringRequireDetail || this.$deepClone(this.detailFormTemplate)
          this.detailForm.flowDetailId = this.processFlowList[0].flowDetailId
          this.tableData1 = this.currentProcess.engineeringRequireDetailDemandData || []
          this.tableData2 = this.currentProcess.engineeringRequireDetailOutputData || []
          this.tableData3 = this.currentProcess.engineeringRequireDetailProcessData || []
        })
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.checkCurrentForm()) {
            // 如果校验通过，先把旧数据更新到左边工序列表中
            this.processFlowList[this.currentProcessIndex].engineeringRequireDetail = this.$deepClone(this.detailForm)
            this.processFlowList[this.currentProcessIndex].engineeringRequireDetailDemandData = this.$deepClone(this.tableData1)
            this.processFlowList[this.currentProcessIndex].engineeringRequireDetailOutputData = this.$deepClone(this.tableData2)
            this.processFlowList[this.currentProcessIndex].engineeringRequireDetailProcessData = this.$deepClone(this.tableData3)
            const cacheData = this.$deepClone(this.formData)
            cacheData.detailAddDto = this.$deepClone(this.processFlowList)

            addOrUpdate(cacheData).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$layer.close(this.layerid) // 关闭弹框
              this.$parent.refresh() // 调用父组件的刷新方法
            })
          }
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },

    chooseBOMMaterial() {
      this.triggerTag = true
      this.$layer.iframe({
        // 弹框
        content: {
          content: ChooseBOMMaterial, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            selectedRow: this.formData
          }
        },
        area: ['1000px', '700px'],
        title: '选择物料', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    chooseBOMMaterialCallBack(row) {
      this.formData.bomDetailId = row.bomDetailId
      this.formData.materialId = row.materialId
      this.formData.materialCode = row.materialCode
      this.formData.materialName = row.materialName
      this.formData.materialModel = row.materialModel
      this.formData.materialTypeName = row.materialTypeName
      this.formData.materialUnitName = row.materialUnitName

      this.$nextTick(() => {
        this.initProcessFlowData()
        // this.getPictureOptions()
      })
    },
    initProcessFlowData() { // 初始化工艺流程数据
      if (this.processFlowList.length > 0) {
        this.processFlowList.forEach(item => {
          item.engineeringRequireDetail = this.$deepClone(this.detailFormTemplate)
          item.engineeringRequireDetailDemandData = []
          item.engineeringRequireDetailOutputData = []
          item.engineeringRequireDetailProcessData = []
        })

        // 模拟点击第一条
        this.currentProcess = this.processFlowList[0]
        this.currentProcessIndex = 0
        this.detailForm = this.currentProcess.engineeringRequireDetail || this.$deepClone(this.detailFormTemplate)
        this.detailForm.flowDetailId = this.processFlowList[0].flowDetailId
        this.tableData1 = this.currentProcess.engineeringRequireDetailDemandData || []
        this.tableData2 = this.currentProcess.engineeringRequireDetailOutputData || []
        this.tableData3 = this.currentProcess.engineeringRequireDetailProcessData || []
      }
    },
    chooseProcessFlow() {
      this.triggerTag = true
      this.$layer.iframe({
        // 弹框
        content: {
          content: ChooseProcessFlow, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            id: this.formData.flowId ? this.formData.flowId : ''
          }
        },
        area: ['880px', '700px'],
        title: '选择工艺流程', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    chooseProcessFlowCallBack(row) {
      this.formData.flowId = row.id
      this.formData.flowCode = row.code
    }
  }
}
</script>

<style lang="less" scoped>
.processRequirement_bottom{
  display: flex;
  border-top: 1px solid rgba(105,105,105,0.2);
  .processRequirement_bottom_tree{
    width: 30%;
    border-right: 1px solid rgba(105,105,105,0.2);
    .tree_header{
      height: 50px;
      margin: 0 20px;
      display: flex;align-items: center;
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #387BFC;
    }
    .tree_container{
      margin: 0 20px;overflow-y: overlay;

      .tree_container_item{
        height: 40px;display: flex;align-items: center;
        padding-left: 20px;
      }
      .selected_row{

        background-color: rgba(56,123,252,1);
        color: white;
      }

      .tree_container_item:hover{
        background-color: rgba(56,123,252,0.5);
        color: white;
      }
    }
  }
  .processRequirement_bottom_detail{
    width: 70%;
    .formItem_header_padding{
      margin-top: 20px;
    }
    .detail_form{
      display: flex;align-items: center;
      .detail_form_item{
        width: calc(50% - 40px);
        display: flex;align-items: center;
        margin-left: 20px;
        margin-right: 20px;
        .detail_form_item_name{
          height: 30px;
          line-height: 30px;
          width: 120px;
          font-size: 14px;
          color: #666;
        }
        .detail_form_item_input{
          width: calc(100% - 120px);
          /deep/ .el-input__inner{
            height: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>
